<script>
import Menu from './components/Menu.vue';
import KtHeader from "/src/views/manage/components/KtHeader.vue";
import KtMain from "/src/views/manage/components/KtMain.vue";
import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";
import $talent from "/src/js/talent/index.js";
import {menuStore} from "/src/store/moudules/menuStore.js";
import LanguageDialog from "/src/components/common/LanguageDialog.vue";

export default {
  components: {
    LanguageDialog,
    KtIcon,
    KtMain,
    KtHeader,
    Menu
  },
  data() {
    return {
      isMenuOpen: true,
    }
  },
  async created() {
    // 初始化菜单
    this.getMenuList();

    // 跳转
    // this.toPage();
    this.$kt.event.on("menu:close", () => {
      this.isMenuOpen = false;
      // 记录菜单状态
      this.$kt.storage.set("isMenuOpen", this.isMenuOpen);
    });
    this.$kt.event.on("menu:open", () => {
      this.isMenuOpen = true;
      this.$kt.storage.set("isMenuOpen", this.isMenuOpen);
    });
    // 如果有菜单状态，设置菜单状态
    let isMenuOpen = this.$kt.storage.get("isMenuOpen");
    if (isMenuOpen !== null) {
      this.$kt.event.emit(isMenuOpen ? "menu:open" : "menu:close");
    }
  },
  methods: {
    // TODO 后期优化掉，不使用pinia，而换成采用Kantboot的storage存储
    getMenuList() {
      this.$kt.requestSecurity.send({
        uri: '/user-admin-web/admin/router/getSelf',
        method: 'POST',
        stateSuccess: (res) => {
          menuStore().setMenuList(res.data);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },

  }
}

</script>


<template>

  <div
      @click="() => $refs.languageDialog.open()"
      class="language-box">
    <img
        class="language-icon"
        src="/language.svg" />
  </div>
  <language-dialog
  ref="languageDialog"
  ></language-dialog>


  <el-container
      class="no-mp">
    <el-aside :width="isMenuOpen?'240px':'80px'">
      <Menu></Menu>
    </el-aside>
    <el-container class="no-mp">
      <el-header class="no-mp">
        <kt-header></kt-header>
      </el-header>
      <el-main style="margin-top: 20px" class="no-mp">
        <kt-main></kt-main>
      </el-main>
    </el-container>
  </el-container>

</template>

<style lang="scss" scoped>
.no-mp {
  margin: 0;
  padding: 0;
}

.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .app-loading-icon-box{
    animation: rotate 1s linear infinite;
  }

  .app-loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #fff;
    text-align: center;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.back-logo-box{
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  opacity: .2;

  .back-logo{
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.language-box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  cursor: pointer;

  .language-icon {
    width: 20px;
    height: 20px;
  }
}

.language-box:hover{
  transform: scale(1.1);
}

.language-box:active{
  transform: scale(1);
}


</style>